.show {
    animation: show-item 1s ease-in forwards;
}

.hidden {
    animation: hide-item 1s ease-in forwards;
}

@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }

    50% {
        opacity: 0.5;
        color: yellow;
    }

    100% {
        opacity: 0;
        color: blue;
    }

}

@keyframes show-item {
0% {
    opacity: 0;
    color: red;
}

50% {
    opacity: 0.5;
    color: yellow;
}

100% {
    opacity: 1;
    color: blue;
}

}